<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
   <div class="box">
       <div class="min-h-screen bg-gray-50">
           <!-- 顶部导航 -->
           <header class="fixed top-0 left-0 right-0 h-16 bg-white shadow-sm z-50">
               <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
                   <div class="flex items-center">
                       <el-button class="!rounded-button" @click="retuenAssessment()">
                           <el-icon><ArrowLeft /></el-icon>
                           返回
                       </el-button>
                   </div>
                   <h1 class="text-xl font-medium">题目测试</h1>
                   <div class="flex items-center space-x-4">
                       <div class="text-lg font-mono">{{ formatTime }}</div>
                   </div>
               </div>
           </header>

           <!-- 主体内容 -->
           <main class="pt-24 pb-32 max-w-4xl mx-auto px-4">
               <!-- 进度条 -->
               <div class="mb-8">
                   <el-progress :percentage="progress" :format="progressFormat" />
               </div>

               <!-- 题目信息 -->
               <div class="mb-6 flex items-center justify-between">
                   <div class="flex items-center space-x-4">
                       <span class="text-lg font-medium">第 {{ currentIndex + 1 }} 题</span>
                       <el-tag :type="questions[currentIndex].type === '单选' ? 'primary' : 'success'">
                           {{ questions[currentIndex].type }}
                       </el-tag>
                   </div>
                   <el-button class="!rounded-button" @click="showQuestionList = true">
                       题目列表
                   </el-button>
               </div>

               <!-- 题目内容 -->
               <div class="bg-white rounded-lg p-6 shadow-sm mb-6">
                   <div class="text-lg mb-6">{{ questions[currentIndex].content }}</div>
                   <div class="space-y-4">
                       <div
                               v-for="(option, index) in questions[currentIndex].options"
                               :key="index"
                               :class="[
              'p-4 rounded-lg border cursor-pointer transition-colors',
              {
                'border-primary-500 bg-primary-50': isSelected(index),
                'border-gray-200 hover:border-primary-500': !isSelected(index)
              }
            ]"
                               @click="handleSelect(index)"
                       >
                           <div class="flex items-center space-x-3">
                               <div
                                       :class="[
                  'w-6 h-6 rounded-full border-2 flex items-center justify-center',
                  {
                    'border-primary-500 bg-primary-500': isSelected(index),
                    'border-gray-300': !isSelected(index)
                  }
                ]"
                               >
                                   <el-icon v-if="isSelected(index)" class="text-white"><Check /></el-icon>
                               </div>
                               <span>{{ option }}</span>
                           </div>
                       </div>
                   </div>
               </div>
           </main>

           <!-- 底部操作栏 -->
           <footer class="fixed bottom-0 left-0 right-0 h-20 bg-white border-t">
               <div class="max-w-4xl mx-auto px-4 h-full flex items-center justify-between">
                   <el-button
                           class="!rounded-button"
                           :disabled="currentIndex === 0"
                           @click="handlePrev"
                   >
                       上一题
                   </el-button>
                   <el-button
                           class="!rounded-button"
                           type="primary"
                           @click="handleNext"
                   >
                       {{ isLastQuestion ? '提交' : '下一题' }}
                   </el-button>
               </div>
           </footer>

           <!-- 题目列表弹窗 -->
           <el-dialog
                   v-model="showQuestionList"
                   title="题目列表"
                   width="500px"
           >
               <div class="grid grid-cols-5 gap-4">
                   <div
                           v-for="(_, index) in questions"
                           :key="index"
                           :class="[
            'h-12 rounded-lg flex items-center justify-center cursor-pointer border',
            {
              'border-primary-500 bg-primary-50': index === currentIndex,
              'border-gray-200': index !== currentIndex
            }
          ]"
                           @click="jumpToQuestion(index)"
                   >
                       {{ index + 1 }}
                   </div>
               </div>
           </el-dialog>
       </div>
   </div>
</template>

<script lang="ts" setup>
    import { ref, computed } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import {useRoute,useRouter}  from "vue-router";
    import { ArrowLeft, Star, Check } from '@element-plus/icons-vue';
    const router=useRouter()
    // 题目数据
    const questions = ref([
        {
            type: '单选',
            content: '中国四大发明是指造纸术、指南针、火药和下列哪项？',
            options: ['活字印刷术', '瓷器', '茶叶', '丝绸'],
            answer: [0]
        },
        {
            type: '多选',
            content: '下列哪些是中国的一线城市？',
            options: ['北京', '上海', '广州', '深圳', '成都'],
            answer: [0, 1, 2, 3]
        },
        {
            type: '单选',
            content: '长江是中国第几长的河流？',
            options: ['第一长', '第二长', '第三长', '第四长'],
            answer: [0]
        },
        {
            type: '多选',
            content: '以下哪些是中国的世界文化遗产？',
            options: ['长城', '故宫', '兵马俑', '苏州园林', '都江堰'],
            answer: [0, 1, 2, 3, 4]
        },
        {
            type: '单选',
            content: '中国的国花是什么？',
            options: ['牡丹', '月季', '梅花', '菊花'],
            answer: [0]
        }
    ]);

    const currentIndex = ref(0);
    const showQuestionList = ref(false);
    const timer = ref(0);
    const answers = ref(Array(questions.value.length).fill([]));

    // 计时器
    const startTimer = () => {
        setInterval(() => {
            timer.value++;
        }, 1000);
    };

    const formatTime = computed(() => {
        const minutes = Math.floor(timer.value / 60);
        const seconds = timer.value % 60;
        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    });

    // 进度相关
    const progress = computed(() => {
        return Math.round(((currentIndex.value + 1) / questions.value.length) * 100);
    });

    const progressFormat = (percentage: number) => {
        return `${currentIndex.value + 1}/${questions.value.length}`;
    };

    // 选项操作
    const isSelected = (optionIndex: number) => {
        return answers.value[currentIndex.value].includes(optionIndex);
    };

    const handleSelect = (optionIndex: number) => {
        const currentAnswers = answers.value[currentIndex.value];
        const currentQuestion = questions.value[currentIndex.value];

        if (currentQuestion.type === '单选') {
            answers.value[currentIndex.value] = [optionIndex];
        } else {
            const index = currentAnswers.indexOf(optionIndex);
            if (index === -1) {
                answers.value[currentIndex.value] = [...currentAnswers, optionIndex];
            } else {
                answers.value[currentIndex.value] = currentAnswers.filter(i => i !== optionIndex);
            }
        }
    };

    // 导航操作
    const isLastQuestion = computed(() => {
        return currentIndex.value === questions.value.length - 1;
    });

    const handlePrev = () => {
        if (currentIndex.value > 0) {
            currentIndex.value--;
        }
    };

    const handleNext = () => {
        if (isLastQuestion.value) {
            handleSubmit();
        } else {
            currentIndex.value++;
        }
    };

    const jumpToQuestion = (index: number) => {
        currentIndex.value = index;
        showQuestionList.value = false;
    };

    const handleBack = async () => {
        try {
            await ElMessageBox.confirm('确定要退出答题吗？已答题目将会自动保存', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            });
            // 处理退出逻辑
        } catch {
            // 用户取消退出
        }
    };

    const handleCollect = () => {
        ElMessage.success('题目收藏成功');
    };

    const handleSubmit = () => {
        ElMessageBox.confirm('确定要提交答案吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage.success('提交成功！');
        });
    };

    // 初始化
    startTimer();
    function retuenAssessment() {
router.push({path:'/assessment'})
    }
</script>

<style scoped>
    :deep(.el-progress-bar__inner) {
        transition: width 0.3s ease;
    }

    .border-primary-500 {
        border-color: #409EFF;
    }

    .bg-primary-50 {
        background-color: #ecf5ff;
    }

    .text-primary-500 {
        color: #409EFF;
    }
</style>

